<template>
	<view class="member-page bg-white" :style="my_style">
		<!-- 修改个人信息 -->
		<view class="flex-center fdc">
			<image class="head u-m-b-2" @click="uploadImage" :src="user_info.headimg" mode=""></image>
			<text class="light-color font-24 lh-34" @click="uploadImage">修改头像</text>
		</view>
		<!-- 表单 -->
		<view class="form m-t-60">
			<view class="cell border-bottom-d8 flex">
				<view class="label">昵称</view>
				<input type="text" v-model="user_info.nickname" placeholder="请输入昵称" />
			</view>
			<view class="cell border-bottom-d8 flex">
				<view class="label">手机号</view>
				<input type="text" class="light-color" disabled="true" :value="user_info.mobile" />
				<view class="color-b font-28 flex m-r-38" @click="jumpPage('/pages/user/mobile?scene=verify_mobile')">
					换绑手机号<u-icon name="arrow-right" color="#CCCCCC" size="25rpx"></u-icon>
				</view>
			</view>
			<view class="cell border-bottom-d8 flex">
				<view class="label">微信号</view>
				<input type="text" class="light-color" disabled="true" :value="user_info.wx_nickname" />
				<view class="color-b font-28 flex m-r-38" @click="bind">{{user.wx_nickname ? '已绑定' : '未绑定'}}
					<u-icon name="arrow-right" color="#CCCCCC" size="25rpx">
					</u-icon>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-primary-btn" @tap="$u.debounce(editUserInfo, 2000, true)">保存</view>
		</view>

		<u-popup mode="center" round="16rpx" :show="show">
			<view class="w-560 p-b-30">
				<view class="h-110 flex row-center font-36 color-d font-weight-500">解除微信绑定</view>
				<view class="h-110 flex row-center font-28 color-d">你确定要解除与微信账号的绑定吗</view>
				<view class="flex row-center text-center lh-80 font-32">
					<view class="w-200 h-80 border-dc radius-8 color-b" @click="wxLogin(false)">确定</view>
					<view class="w-200 h-80 back-color-b radius-8 color-c m-l-30" @click="show = false">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import mixin from '@/mixin/ali'
	export default {
		name: "userinfo",
		mixins: [mixin],
		data() {
			return {
				user_info: '',
				show: false
			}
		},
		onLoad(options) {
			this.user_info = this.user
			// this.getUserInfo()
		},
		methods: {
			bind() {
				if (this.user.wx_nickname) {
					this.show = true
				} else {
					this.wxLogin()
				}
			},
			/**
			 * 获取用户信息
			 */
			async getUserInfo() {
				const res = await this.$api.common.user('getUserInfo')
				if (res.code === 200) {
					this.user_info = res.data
				}
			},
			/**
			 * 修改用户信息
			 */
			async editUserInfo() {
				const {
					nickname,
					headimg
				} = this.user_info
				let params = {
					nickname,
					headimg,
				}
				const res = await this.$api.common.user('editUserInfo', params)
				if (res.code === 200) {
					this.successBack('修改成功')
				}
			},
			// 上传图片
			uploadImage() {
				let _this = this
				uni.chooseImage({
					count: 1,
					success: (v) => {
						const tempFilePaths = v.tempFilePaths
						let temp = tempFilePaths[0]
						let file_name = v.tempFiles[0].name
						_this.fileUpload('image', temp, file_name, (res) => {
							_this.user_info.headimg = res
						})
					},
				})
			},
			jumpPage(url) {
				uni.$u.route(url)
			},
		},
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.member-page {
		height: 100%;
		padding: 70rpx 0 444rpx;

		.head {
			width: 156rpx;
			height: 156rpx;
			border-radius: 50%;
		}

		.form {
			padding-left: 24rpx;

			.cell {
				width: 100%;
				height: 88rpx;
				font-size: 32rpx;
				background: #fff;

				.label {
					width: 128rpx;
				}

				input {
					flex: 1;
				}
			}
		}

		.footer {
			// padding: 144rpx 24rpx 0;

			.footer-primary-btn {
				width: 690rpx;
				height: 88rpx;
				background-color: $b;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				border-radius: 49rpx;
				margin: 144rpx auto 0;
			}
		}
	}
</style>
